<template>
  <div class="about memberBg">
    <!-- 头部 -->
    <InsideHeader></InsideHeader>

    <!-- memberInquiry -->
    <div class="memberInquiry">
      <div class="memberBlock">
        <div class="memberIndexN">
          <div class="memberIndexNC">
            <nuxt-link :to="{name: 'member'}">个人信息</nuxt-link>
            <nuxt-link :to="{name: 'member-memberInquiry'}">我的问询</nuxt-link>
            <nuxt-link :to="{name: 'member-memberElearning'}">我的elearning</nuxt-link>
            <nuxt-link :to="{name: 'member-collect'}" class="on">我的收藏</nuxt-link>
            <nuxt-link :to="{name: 'member-message'}">系统消息</nuxt-link>
            <div class="clear"></div>
          </div>
          <div class="clear"></div>
        </div>
        <div class="memberInquiryC">
          <div class="memberInquiryDetailsCtit">
            <em></em>
            <p class="title">我的收藏</p>
          </div>
          <div class="collect" style="position:relative;">
            <ul class="title">
              <li @click="slider">
                收藏类型
                <img src="/images/down.png" />
              </li>
              <li>标题</li>
              <li>时间</li>
              <li>操作</li>
            </ul>
            <div class="collect-types">
              <div v-for="(item,index) in types" :key="index" @click="choose(index)">{{item}}</div>
            </div>
            <div class="contentlist" ref="scrollList">
              <ul class="content" v-for="(item,index) in list" :key="index">
                <li>{{item.type===1?'新闻':(item.type===2?'elearling课程':(item.type===3?'职位':'资料'))}}</li>
                <li>{{item.title}}</li>
                <li>{{item.createTime}}</li>
                <li>
                  <span>取消收藏</span>
                  <span>
                    <img src="/images/share.png" />分享
                  </span>
                </li>
              </ul>
             <p v-if="this.list.length==0" class="nodata">暂无收藏内容</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <HomeHooter></HomeHooter>
  </div>
</template>

<script>
import $ from "jquery";
import "@/assets/css/home.css";
import "@/assets/css/member.css";
import InsideHeader from "@/components/headuser";
import HomeHooter from "@/components/footer";
import Qs from "qs";

export default {
  name: "memberInquiry",
  data() {
    return {
      page: 1,
      createBy: "",
      type: 1,
      list: [],
      types: ["新闻", "elearling课程", "职位", "资料"],
      isKaiGuan: true
    };
  },
  components: {
    InsideHeader,
    HomeHooter
  },
  methods: {
    memberInquiryCOSdel() {
      $(".memberInquiryCOSdelPUP").show();
    },
    memberInquiryCOSdelPUPCclose() {
      $(".memberInquiryCOSdelPUP").hide();
    },
    formatter(row, column) {
      return row.address;
    },
    //
    slider() {
      $(".collect-types").slideToggle();
    },

    // 选择分类
    choose(i) {
      this.type = i + 1;
      this.getCollectionPage();
    },

    // 获取收藏信息
    getCollectionPage() {
      let id = this.$axios;
      let params = {
        page: this.page,
        limit: 10,
        type: this.type
      };
      params = Qs.stringify(params);
      this.$api.member.getCollectionPage(id, params).then(res => {
        let result = res.data;
        if (result.code === 1) {
          if (result.data.data.length < 8) {
            this.isKaiGuan = false;
          } else {
            this.isKaiGuan = true;
          }
          if (this.page != 1) {
            this.list = this.list.concat(result.data.data);
          } else {
            this.list = result.data.data;
          }
          //   this.list = result.data.data
          //     .concat(result.data.data)
          //     .concat(result.data.data)
          //     .concat(result.data.data)
          //     .concat(result.data.data)
          //     .concat(result.data.data)
          //     .concat(result.data.data);
        }
      });
    },

    menu() {
      if (this.isKaiGuan) {
        let scroll =
          this.getScrollTop() + this.getWindowHeight() - this.getScrollHeight();
        console.log(scroll, "scroll");
        if (scroll === 0) {
          this.page++;
          this.getCollectionPage();
        }
      }
    },
    //滚动条在Y轴上的滚动距离
    getScrollTop() {
      var documentScrollTop = 0;
      documentScrollTop = this.$refs.scrollList.scrollTop;
      return documentScrollTop;
    },
    //文档的总高度
    getScrollHeight() {
      var documentScrollHeight = 0;
      documentScrollHeight = this.$refs.scrollList.scrollHeight;
      return documentScrollHeight;
    },
    //浏览器视口的高度
    getWindowHeight() {
      var windowHeight = 0;
      windowHeight = this.$refs.scrollList.clientHeight;
      return windowHeight;
    }
  },
  created() {
    this.getCollectionPage();
  },
  mounted() {
    if (this.$route.path == "/member/collect") {
      this.$refs.scrollList.addEventListener("scroll", this.menu);
    } else {
      //   window.addEventListener("scroll", "");
    }
  }
};
</script>
<style scoped>
.memberInquiryDetailsCtit .title {
  width: 95%;
}
.content li {
  border-right: solid 1px #dfdfdf;
}
.content li:last-child {
  border-right: 0;
}
.collect {
  margin-top: 20px;
  overflow: hidden;
}
.collect .title {
  background-color: #f4f4f4;
  margin-bottom: 20px;
  font-weight: bold;
}
.title img,
.content img {
  width: 20px;
  height: 20px;
  vertical-align: middle;
}
.content img {
  margin-left: 30px;
}
.collect ul {
  overflow: hidden;
  line-height: 60px;
  border: solid 1px #dfdfdf;
  font-size: 14px;
}
.collect .content {
  border-bottom: 0;
}
.collect .content:last-child {
  border-bottom: solid 1px #dfdfdf;
}
.collect li {
  text-align: center;
  float: left;
}
.collect ul li:nth-child(1) {
  width: 14%;
}
.collect ul li:nth-child(2) {
  width: 50%;
}
.collect ul li:nth-child(3) {
  width: 15%;
}
.collect ul li:nth-child(4) {
  width: 20%;
}
.message {
  width: 100%;
  height: auto;
  margin-top: 10px;
  padding: 0px;
  box-sizing: border-box;
}
.message ul li {
  border-bottom: solid 1px #e5e5e5;
  padding: 20px;
  overflow: hidden;
}
.message ul li:hover {
  background-color: #e5e5e5;
}
.message ul li:hover .delmsg {
  display: inline-block;
}
.message ul li h2 {
  font-size: 18px;
  font-weight: normal;
  color: #e70012;
}
.message ul li p {
  font-size: 14px;
  margin: 10px 0 0 30px;
  width: 85%;
  float: left;
}
.message ul li span {
  font-size: 14px;
  color: #000;
}
.delmsg {
  color: #e70012 !important;
  margin-top: 10px;
  display: none;
}
.allread {
  color: #333;
  font-size: 14px;
  float: right;
}
input[type="checkbox"] {
  width: 18px;
  height: 18px;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  line-height: 18px;
  position: relative;
  margin-right: 10px;
}
input[type="checkbox"]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background: #fff;
  width: 100%;
  height: 100%;
  border: 1px solid #d9d9d9;
}
input[type="checkbox"]:checked::before {
  content: "\2713";
  background-color: #fff;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  border: 1px solid #e50232;
  color: #e50232;
  font-size: 20px;
  font-weight: bold;
}
/* .collect-types {
  position: relative;
} */
.collect-types {
  position: absolute;
  background: #fff;
  top: 45px;
  left: 25px;
  width: 100px;
  text-align: center;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  border: 1px solid #eee;
  display: none;
}
.collect-types div {
  padding: 10px 0;
}
.collect-types div:hover {
  background: #e50232;
  color: #fff;
  cursor: pointer;
}
.contentlist {
  height: 400px;
  overflow-x: hidden;
  overflow-y: scroll;
}
.nodata{
  width: 100%;
  text-align: center;;
  margin-top: 30px
}
</style>